---
title: Getting Started
description: Build your first simple PDF viewer with EmbedPDF and Svelte in just a few steps.
---

# Getting Started

Let's build a basic, scrollable PDF viewer in Svelte. This guide will walk you through the essential setup.

## 1. Installation

You'll need a few packages to create a minimal viewer: the core library, the engine, and a few essential plugins.

```sh npm2yarn
npm install @embedpdf/core @embedpdf/engines @embedpdf/plugin-loader @embedpdf/plugin-viewport @embedpdf/plugin-scroll @embedpdf/plugin-render
````

## 2\. Create Your Viewer Component

The core of your viewer will be the `<EmbedPDF>` component, which manages the engine and plugins.

```svelte copy filename="PDFViewer.svelte"
<script lang="ts">
import { usePdfiumEngine } from '@embedpdf/engines/svelte';
import { EmbedPDF } from '@embedpdf/core/svelte';
import { createPluginRegistration } from '@embedpdf/core';

// Import the essential plugins and their components
import { ViewportPluginPackage, Viewport } from '@embedpdf/plugin-viewport/svelte';
import { Scroller, ScrollPluginPackage, type RenderPageProps } from '@embedpdf/plugin-scroll/svelte';
import { LoaderPluginPackage } from '@embedpdf/plugin-loader/svelte';
import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/svelte';

// 1. Initialize the engine with the Svelte store
const pdfEngine = usePdfiumEngine();

// 2. Register the plugins you need
const plugins = [
  createPluginRegistration(LoaderPluginPackage, {
    loadingOptions: {
      type: 'url',
      pdfFile: {
        id: 'example-pdf',
        url: 'https://snippet.embedpdf.com/ebook.pdf',
      },
    },
  }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
];
</script>

{#snippet RenderPageSnippet(page: RenderPageProps)}
  <div
    style:width="{page.width}px"
    style:height="{page.height}px"
    style:position="relative"
  >
    <RenderLayer pageIndex={page.pageIndex} />
  </div>
{/snippet}

<div style="height: 500px; border: 1px solid black;">
  {#if pdfEngine.isLoading || !pdfEngine.engine}
    <div class="loading-pane">
      Loading PDF Engine...
    </div>
  {:else}
    <EmbedPDF engine={pdfEngine.engine} {plugins}>
      <Viewport class="viewport-class">
        <Scroller {RenderPageSnippet} />
      </Viewport>
    </EmbedPDF>
  {/if}
</div>

<style>
.loading-pane {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.viewport-class {
  background-color: #f1f3f5;
}
</style>
```

## 3\. Render Your Component

Finally, import and use your new `<PDFViewer />` component in your main application file.

```svelte filename="App.svelte"
<script lang="ts">
import PDFViewer from './PDFViewer.svelte';
</script>

<PDFViewer />
```

### Interactive Example

When you run the code above, it will produce a functional, scrollable PDF viewer like the one shown here:

import { GettingStartedExample } from './code-examples/getting-started-example';

<GettingStartedExample />

You now have a functional PDF viewer!

## Next Steps

  - Discover how to add more features by **[Understanding Plugins](./understanding-plugins.md)**.
